google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(function(){
  var data = new google.visualization.DataTable();
       data.addColumn('string', '日');
       data.addColumn('number', 'DL数');
       data.addColumn('number', 'Googleセルラン');
       data.addColumn('number', 'iOSセルラン');
       data.addColumn({type:'string', role:'annotation'});
       data.addColumn({type:'string', role:'annotationText'});
       data.addRows([
        ['2020-05-22',417228,null,193,null,null],
['2020-05-23',417512,null,207,null,null],
['2020-05-24',417634,null,192,null,null],
['2020-05-25',417856,null,149,null,null],
['2020-05-26',417934,null,167,null,null],
['2020-05-27',418285,null,182,null,null],
['2020-05-28',418458,null,181,null,null],
['2020-05-29',418610,null,169,null,null],
['2020-05-30',418749,null,193,null,null],
['2020-05-31',418795,null,207,null,null],
['2020-06-01',419072,null,213,null,null],
['2020-06-02',419204,null,240,null,null],
['2020-06-03',419204,null,222,null,null],
['2020-06-04',419499,null,173,null,null],
['2020-06-05',419663,null,152,null,null],
['2020-06-06',419841,null,161,null,null],
['2020-06-07',420004,null,166,null,null],
['2020-06-08',420112,null,148,null,null],
['2020-06-09',420266,null,153,null,null],
['2020-06-10',420396,null,159,null,null],
['2020-06-11',420512,null,155,null,null],
['2020-06-12',420642,null,173,null,null],
['2020-06-13',420751,null,185,null,null],
['2020-06-14',420887,null,171,null,null],
['2020-06-15',421047,null,122,null,null],
['2020-06-16',421209,null,148,null,null],
['2020-06-17',421346,null,159,null,null],
['2020-06-18',421448,null,152,null,null],
['2020-06-19',421590,null,154,null,null],
['2020-06-20',421690,null,163,null,null],
['2020-06-21',421819,null,173,null,null],
['2020-06-22',421819,null,145,null,null],
['2020-06-23',422183,null,156,null,null],
['2020-06-24',422183,null,165,null,null],
['2020-06-25',422183,null,183,null,null],
['2020-06-26',422183,null,171,null,null],
['2020-06-27',422183,null,154,null,null],
['2020-06-28',422183,null,170,null,null],
['2020-06-29',422183,null,138,null,null],
['2020-06-30',422183,null,160,null,null],
['2020-07-01',422183,null,219,null,null],
['2020-07-02',422183,null,261,null,null],
['2020-07-03',422183,null,238,null,null],
['2020-07-04',422183,null,230,null,null],
['2020-07-05',422183,null,193,null,null],
['2020-07-06',422183,null,154,null,null],
['2020-07-07',423445,null,180,null,null],
['2020-07-08',423445,null,192,null,null],
['2020-07-09',423624,null,166,null,null],
['2020-07-10',423624,null,202,null,null],
['2020-07-11',423765,null,208,null,null],
['2020-07-12',423855,null,228,null,null],
['2020-07-13',423987,null,183,null,null],
['2020-07-14',424168,null,190,null,null],
['2020-07-15',424168,null,212,null,null],
['2020-07-16',424260,null,201,null,null],
['2020-07-17',424260,null,9,null,null],
['2020-07-18',424429,null,24,null,null],
['2020-07-19',424540,null,30,null,null],
['2020-07-20',424627,null,39,null,null],
['2020-07-21',424731,null,55,null,null]
        ]);
  var options = {
    chartArea: {'width':'85%', 'height':'65%', 'left':60 },
    'pointSize': 3,
    legend: {position: 'top' },
    vAxes:[
      {direction:1},
      {direction:-1,viewWindow:{min:0,max:300}}
    ],
    series: {
      0:{
        type: 'bars',
        color: 'skyblue',
        targetAxisIndex: 0,
      },
      1:{
        type: 'line',
        color: 'seagreen',                
        targetAxisIndex: 1,
      },
      2:{
        type: 'line',
        color: 'red',                
        targetAxisIndex: 1,
      },
    },
    tooltip: { trigger: 'both' },
    focusTarget: 'category',
    colors:['#2980b9','#e74c3c']
  };
  var chart = new google.visualization.ComboChart(document.getElementById('graphField'));
  chart.draw(data, options);
  
  google.visualization.events.addListener(chart, 'click', function() {
    if(chart.getSelection()[0]){
      chart.setSelection(null)
    }
  });


});